<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Myindex</title>
    <link rel="stylesheet" href="indexcss.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="icon" href="image/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</head>
<body id="wrapper">
        <header  class="header_logo">
            <div class="time">
                    <div id="fj">
                <script language=Javascript>

                        var now = new Date();
//                                var Minutes1, Seconds1;
                        if (now.getMinutes() < 10) {
                            Minutes1 = "0" + now.getMinutes();
                        } else {
                            Minutes1 = now.getMinutes();
                        }
                        if (now.getSeconds() < 10) {
                            Seconds1 = "0" + now.getSeconds();
                        } else {
                            Seconds1 = now.getSeconds();
                        }
                        document.write("当前时间：");
                        document.write(1900 + now.getYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + Minutes1 + ":" + Seconds1);
                </script>
                    </div>
            </div>
            <div class="nav_menu">
            <div class="nav">
            <div class="list" id="navlist">
                <ul id="navfouce">
                    <li><a href="#">我的首页</a></li>
                    <li><a href="#">HTML5</a></li>
                    <li><a href="#">CSS3</a></li>
                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Jquery</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
            <div class="box" id="navbox" style="height:0;opacity:0;overflow:hidden;">
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>html</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">html</a>
                            <a href="#">html</a>
                            <a href="#">html</a>
                            <a href="#">html</a>
                            <a href="#">html</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>ajax</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>boostrap</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">boostrap</a>
                            <a href="#">boostrap</a>
                            <a href="#">boostrap</a>
                            <a href="#">boostrap</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>javascript</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>jquery</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">jquery</a>
                            <a href="#">jquery</a>
                            <a href="#">jquery</a>
                            <a href="#">jquery</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>网页布局</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">!DOCTYPE</a>
                            <a href="#">html</a>
                            <a href="#">heade</a>
                            <a href="#">body</a>
                            <a href="#">container</a>
                            <a href="#">article</a>
                            <a href="#">section</a>
                            <a href="#">aside</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>常用的元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">a</a>
                            <a href="#">img</a>
                            <a href="#">ul</a>
                            <a href="#">table</a>
                            <a href="#">form</a>
                            <a href="#">ol</a>
                            <a href="#">h1~h6 </a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>表单的常见元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">input</a>
                            <a href="#">submit</a>
                            <a href="#">option</a>
                            <a href="#">select</a>
                            <a href="#">reset</a>
                            <a href="#">checkbox</a>
                            <a href="#">radio</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>表格的常见元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">table</a>
                            <a href="#">th</a>
                            <a href="#">tr</a>
                            <a href="#">td</a>
                            <a href="#">border</a>
                            <a href="#">colspan</a>
                            <a href="#">rowspan</a>
                            <a href="#">cellspacing</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>无序列表</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">ul</a>
                            <a href="#">li</a>
                            <a href="#">list_style</a>
                            <a href="#">inline-block</a>
                            <a href="#">inline</a>
                            <a href="#">block</a>
                            <a href="#">after</a>
                            <a href="#">last</a>
                            <a href="#">first</a>
                            <a href="#">before</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>图片元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">img</a>
                            <a href="#">src</a>
                            <a href="#">alt</a>
                            <a href="#">width</a>
                            <a href="#">height</a>
                            <a href="#">class</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>视频 音频</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">video</a>
                            <a href="#">audio</a>
                            <a href="#">controls</a>
                            <a href="#">loop</a>
                            <a href="#">autoplay</a>
                            <a href="#">src</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>特殊字符</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">nbsp</a>
                            <a href="#">copy</a>
                            <a href="#">br</a>
                            <a href="#">hr</a>
                            <a href="#">mark</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>暂时想不到了</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>字体设置</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">font-size</a>
                            <a href="#">font-family</a>
                            <a href="#">color</a>
                            <a href="#">face</a>
                            <a href="#">font-style</a>
                            <a href="#">font-weight</a>
                            <a href="#">text-shadow</a>
                            <a href="#">text-align</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>边框设置</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">border-radius</a>
                            <a href="#">border-image</a>
                            <a href="#">solid</a>
                            <a href="#">dashed</a>
                            <a href="#">border-top</a>
                            <a href="#">border-bottom</a>
                            <a href="#">border-left</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>动画效果</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">animation</a>
                            <a href="#">animation-duration</a>
                            <a href="#">animation-delay</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>间距</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">margin</a>
                            <a href="#">padding</a>
                            <a href="#">margin-top</a>
                            <a href="#">margin-right</a>
                            <a href="#">margin-bottom</a>
                            <a href="#">margin-left</a>
                            <a href="#">padding-top</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>对齐方式</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">vertical-align</a>
                            <a href="#">text-align</a>
                            <a href="#">center</a>
                            <a href="#">left</a>
                            <a href="#">right</a>
                            <a href="#">vertical-align</a>
                            <a href="#">vertical-align</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>字符操作</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">mark</a>
                            <a href="#">bold</a>
                            <a href="#">em</a>
                            <a href="#">small</a>
                            <a href="#">strong</a>
                            <a href="#">kbd</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>html</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">html</a>
                            <a href="#">html</a>
                            <a href="#">html</a>
                            <a href="#">html</a>
                            <a href="#">html</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>ajax</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                            <a href="#">ajax</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>boostrap</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">boostrap</a>
                            <a href="#">boostrap</a>
                            <a href="#">boostrap</a>
                            <a href="#">boostrap</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>javascript</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                            <a href="#">javascript</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>jquery</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">jquery</a>
                            <a href="#">jquery</a>
                            <a href="#">jquery</a>
                            <a href="#">jquery</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>网页布局</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">!DOCTYPE</a>
                            <a href="#">html</a>
                            <a href="#">heade</a>
                            <a href="#">body</a>
                            <a href="#">container</a>
                            <a href="#">article</a>
                            <a href="#">section</a>
                            <a href="#">aside</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>常用的元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">a</a>
                            <a href="#">img</a>
                            <a href="#">ul</a>
                            <a href="#">table</a>
                            <a href="#">form</a>
                            <a href="#">ol</a>
                            <a href="#">h1~h6 </a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>表单的常见元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">input</a>
                            <a href="#">submit</a>
                            <a href="#">option</a>
                            <a href="#">select</a>
                            <a href="#">reset</a>
                            <a href="#">checkbox</a>
                            <a href="#">radio</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>表格的常见元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">table</a>
                            <a href="#">th</a>
                            <a href="#">tr</a>
                            <a href="#">td</a>
                            <a href="#">border</a>
                            <a href="#">colspan</a>
                            <a href="#">rowspan</a>
                            <a href="#">cellspacing</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>无序列表</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">ul</a>
                            <a href="#">li</a>
                            <a href="#">list_style</a>
                            <a href="#">inline-block</a>
                            <a href="#">inline</a>
                            <a href="#">block</a>
                            <a href="#">after</a>
                            <a href="#">last</a>
                            <a href="#">first</a>
                            <a href="#">before</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>图片元素</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">img</a>
                            <a href="#">src</a>
                            <a href="#">alt</a>
                            <a href="#">width</a>
                            <a href="#">height</a>
                            <a href="#">class</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>视频 音频</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">video</a>
                            <a href="#">audio</a>
                            <a href="#">controls</a>
                            <a href="#">loop</a>
                            <a href="#">autoplay</a>
                            <a href="#">src</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>特殊字符</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">nbsp</a>
                            <a href="#">copy</a>
                            <a href="#">br</a>
                            <a href="#">hr</a>
                            <a href="#">mark</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>暂时想不到了</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                            <a href="#">你猜</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>字体设置</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">font-size</a>
                            <a href="#">font-family</a>
                            <a href="#">color</a>
                            <a href="#">face</a>
                            <a href="#">font-style</a>
                            <a href="#">font-weight</a>
                            <a href="#">text-shadow</a>
                            <a href="#">text-align</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>边框设置</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">border-radius</a>
                            <a href="#">border-image</a>
                            <a href="#">solid</a>
                            <a href="#">dashed</a>
                            <a href="#">border-top</a>
                            <a href="#">border-bottom</a>
                            <a href="#">border-left</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>动画效果</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">animation</a>
                            <a href="#">animation-duration</a>
                            <a href="#">animation-delay</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>间距</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">margin</a>
                            <a href="#">padding</a>
                            <a href="#">margin-top</a>
                            <a href="#">margin-right</a>
                            <a href="#">margin-bottom</a>
                            <a href="#">margin-left</a>
                            <a href="#">padding-top</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>对齐方式</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">vertical-align</a>
                            <a href="#">text-align</a>
                            <a href="#">center</a>
                            <a href="#">left</a>
                            <a href="#">right</a>
                            <a href="#">vertical-align</a>
                            <a href="#">vertical-align</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>字符操作</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">mark</a>
                            <a href="#">bold</a>
                            <a href="#">em</a>
                            <a href="#">small</a>
                            <a href="#">strong</a>
                            <a href="#">kbd</a>
                        </p>
                    </li>
                </ul>
            </div>
            </div>
            </div>
            </div>
        </header>
        <div id="container1">
            <div id="leftcolumn" >
                <div class="title_bg1">
                    <h2><a href="">HTML5</a></h2>
                </div>
                <ul>
                    <li>
                        <a href="" class="sb"><img src="image/hd2.jpg" alt="新闻简介"> </a><a href="" class="ms">
                        <h3>起步</h3>
                        <p>Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。</p>
                    </a>
                    </li>
                    <li>
                        <a href=""class="sb"><img src="image/hd3.jpg" alt="新闻简介"> </a><a href="" class="ms">
                        <h3>全局样式</h3>
                        <p>设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。</p>
                    </a>
                    </li>
                    <section id="lunbotu">
                        <div class="wrap">
                            <div id="slide-holder">
                                <div id="slide-runner">
                                    <a href="/"><img id="slide-img-1" src="images/1.jpg" class="slide" alt="" /></a>
                                    <a href="/"><img id="slide-img-2" src="images/2.jpg" class="slide" alt="" /></a>
                                    <a href="/"><img id="slide-img-3" src="images/3.jpg" class="slide" alt="" /></a>
                                    <a href="/"><img id="slide-img-4" src="images/4.jpg" class="slide" alt="" /></a>
                                    <a href="/"><img id="slide-img-5" src="images/5.jpg" class="slide" alt="" /></a>
                                    <a href="/"><img id="slide-img-6" src="images/6.jpg" class="slide" alt="" /></a>
                                    <a href="/"><img id="slide-img-7" src="images/7.jpg" class="slide" alt="" /></a>
                                    <div id="slide-controls">
                                        <p id="slide-client" class="text"><strong>风景图片: </strong><span></span></p>
                                        <!--<p id="slide-desc" class="text"></p>-->
                                        <p id="slide-nav"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </ul>
                <div id="leftcolumn_bottom">
                    <div class="title_bg">
                        <h2><a href="">图片壁纸</a></h2>
                    </div>
                    <ul>
                        <li><img src="image/1.jpg"></li><li>
                        <img src="image/2.jpg"></li><li>
                        <img src="image/3.jpg"></li><li class="tp_si">
                        <img src="image/4.jpg"></li><li >
                        <img src="image/5.jpg"></li><li >
                        <img src="image/6.jpg"></li><li >
                        <img src="image/7.jpg"></li><li >
                        <img src="image/8.jpg"></li>
                    </ul>
                </div>
            </div><div id="rightcolumn" >
                <div class="title_bg3">
                    <h2><a href="">javascript</a></h2>
                </div>
                <div class="right_tp">
                    <ul>
                        <li >
                            <img src="image/9.jpg"></li><li >
                        <img src="image/10.jpg"></li>
                    </ul>
                </div>
                <div class="right_content">
                    <form id="defaultForm" method="post" class="form-horizontal" action="">
                        <!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Username</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="username" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Email</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="email" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Password</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control" name="password" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="submit" class="btn btn-success">表单验证</button>
                            </div>
                        </div>
                    </form>
                    <ul>
                        <li><a href="">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</a></li>
                        <li><a href="">Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</a></li>
                        <li><a href="">Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。</a></li>
                        <li><a href="">全球数以百万计的网站都是基于 Bootstrap 构建的。你可以先参观一下我们提供的实例精选或者看一看我们粉丝的网站吧。</a></li>
                        <li><a href="">我们在“优站精选”里展示了许多精美的 Bootstrap 网站。</a></li>
                    </ul>
                </div>
                <article class="bottom">
                    <div class="title_bg">
                        <h2><a href="">友情链接</a></h2>
                    </div>
                    <ul>
                        <li><a href="jquery创建图片页/index_pic.html" target="_blank"><input type="button" value="插件图片展示页"/></a></li>
                        <li><a href="移动端/index.html" target="_blank"><input type="button" value="移动端"/></a></li>
                        <li><a href="响应式/index111.html" target="_blank"><input type="button" value="响应式布局"/></a></li>
                        <li><a href="bootstrap模板.html" target="_blank"><input type="button" value="bootstrap模板"/></a></li>
                        <li><a href="youxijietu_shizhuang.html" target="_blank"><input type="button" value="其它"/></a></li>
                    </ul>
                </article>
                <div class="lxwm">
                    <div class="title_bg">
                        <h2><a href="">联系我们</a></h2>
                    </div>
                    <a href=""><img src="image/about_13.jpg"></a>
                    <ul>
                        <li>Address：Zhejiang Gongshang University</li>
                        <li>TEL：13216123173</li>
                        <li>QQ：956028611</li>
                    </ul>
                </div>
            </div>
        </div>
        <footer id="footer">
            <ul>
                <li class="lxwm_1"><a href="">版权信息</a></li>
                <li class="lxwm_2"><a href="">反馈建议</a></li>
                <li class="lxwm_3"><a href="">加入我们</a></li>
                <li ><a href="">站点地图</a></li>
            </ul>
            <p>©版权所有 盗版必究！</p>
        </footer>
        <script type="text/javascript" src="js/item.js"></script>
</body>
</html>